<!doctype html>
<html lang="en">
<style>
    /* 整个顶部导航条，包括登陆注册按钮 */
    #header_top_all {
        right: 0px;
        left: 0px;
        width: 1248px;
        height: 50px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        position: fixed;
    }

    .header_ta {
        position: fixed;
        z-index: 9999999999999999999;
        width: 100%;
        height: 50px;
    }

    /* 顶部的左侧导航条 */
    #header_top_left {
        height: 50px;
        display: flex;
    }

    /* 顶部logo */
    #header_top_left_logo {
        margin-top: 9px;
    }

    /* 顶部的左侧导航条中父元素 */

    #header_top_left_title {
        display: flex;
        height: 28px;
        margin-top: 13px;
        margin-left: 8px;
    }

    #header_top_left_title .menu2 {
        width: 24px;
        height: 28px;
        background: url("/static/home/images/menu_sprite.svg") -50px -558px no-repeat;

    }

    /* 顶部的左侧导航条中的链接 */
    #header_top_left_title li {
        list-style: none;
        color: #FFFFFF;
        line-height: 28px;
        margin-right: 25px;
        cursor: pointer;
    }

<<<<<<< HEAD


    .default {
        border-bottom: 1px solid #FFFFFF;
    }

    .menu:hover {
        border-bottom: 1px solid #FFFFFF;
    }

    /* 登陆注册按钮的父元素 */
    #header_top_right {
        height: 50px;
        display: flex;
    }

    .header_top_right {
        border-right: 1px solid #f5f5f5;
        /*width: 46px;*/
        cursor: pointer
    }

    .header_top_right {
        width: 100px;
        height: 30px;
        background-color: #235EA4;
        line-height: 30px;
        text-align: center;
        float: left;
        margin-right: 10px;
        display: inline;
        position: relative;
        cursor: pointer;
    }

    .header_top_right ul {
        position: absolute;
        left: 0;
        top: 30px;
        display: none;
    }

    /* 修改顶部左侧导航栏条中的链接中的··· */
    #header_top_left_title img {
        width: 20px;
        margin-top: 5px;
    }

    .default {
        border-bottom: 1px solid #FFFFFF;
    }

    .menu:hover {
        border-bottom: 1px solid #FFFFFF;
    }

    /* 登陆注册按钮的父元素 */
    #header_top_right {
        height: 50px;
        display: flex;
        width: 144px;
        position: fixed;
        right: 0px;
    }

    /* 顶部两个公共的按钮样式 */

    #header_top_right button {
        width: 50px;
        height: 32px;
        font-size: 15px;
        color: #FFFFFF;
        margin-left: 15px;
        margin-top: 9px;
    }

    /* 登陆按钮 */
    #login {
        background: rgba(201, 0, 0, 0.6);
        border: 0px;
    }

    /* 登陆的悬浮样式 */

    #login:hover {
        background: rgba(201, 0, 0, 0.9);
    }

    #rigister {

        background: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
        font-size: 15px;
        border: 1px solid #FFFFFF;
    }


    #rigister:hover {
        background: #FFFFFF;
        color: black;
    }

    .search {
        line-height: 50px;
        text-indent: 1em;
    }

    .search input {
        border-radius: 5px;
        background-color: rgba(96, 96, 96, 0.2);
    }


    #username {
        background: rgba(201, 0, 0, 0.6);
        border: 0px;
    }

    /* 登陆的悬浮样式 */
    #username:hover {
        background: rgba(201, 0, 0, 0.9);
    }

    #out {
        text-align: center;
        margin-top: 10px;
        width: 80px;
        height: 29px;
        line-height: 28px;
        margin-left: 20px;
        background: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
        font-size: 15px;
        border: 1px solid #FFFFFF;
    }

    #out:hover {
        background: #FFFFFF;
        color: black;
    }

    .search {
        line-height: 50px;
    }

    .search input {
        border-radius: 5px;
        background-color: rgba(96, 96, 96, 0.2);
        border: 1px solid #FFFFFF;
        width: 471px;
        height: 33px;
        background: url('/static/home/images/icon_search.svg') no-repeat;
        background-position: 98% center;
        outline: none;
    }

    .guanggao {
        margin-top: 0px;
    }

    .xian1 {
        height: 1px;
        width: 45%;
        border: 1px solid #ccc;
    }

    .content_title {
        color: gray;
        font-size: 18px;
        text-align: center;
        line-height: 20px;
        margin: 20px auto;
    }

    /* 标题前面的横线 */
    .content_title:before {
        content: "";
        width: 40%;
        height: 10px;
        border-bottom: 2px solid #ddd;
        float: left;
    }

    /* 标题后面的横线 */
    .content_title:after {
        content: "";
        width: 40%;
        height: 10px;
        border-bottom: 2px solid #ddd;
        float: right;
    }

    /* 中间部分的七个分类 */
    #content_icon {
        display: flex;
        justify-content: space-between;
    }

    #content_icon div {
        width: 14%;
        text-align: center;
        height: 141px;
        line-height: 141px;
        border-radius: 5px;
        color: #FFFFFF;
        font-size: 18px;
        cursor: pointer;

    }

    #content_icon_one {
        background: url("/static/home/images/gz1.jfif") no-repeat;
        background-size: 100% 100%;
    }

    #content_icon_two {
        background: url("/static/home/images/gz2.jfif");
        background-size: 100% 100%;
    }

    #content_icon_three {
        background: url("/static/home/images/gz3.jfif");
        background-size: 100% 100%;
    }

    #content_icon_four {
        background: url("/static/home/images/gz4.webp");
        background-size: 100% 100%;
    }

    #content_icon_five {
        background: url("/static/home/images/gz5.webp");
        background-size: 100% 100%;
    }

    #content_icon_six {
        background: url("/static/home/images/gz6.webp");
        background-size: 100% 100%;
    }

    /*  为你推荐  */

    .tuijian .face {

        width: 100%;
        height: 100%;
    }

    .content_tuijian {
        border-bottom: 4px solid #fff;
        display: flex;
        flex-direction: row;
    }

    .tuijian {
        border-radius: 3px;
        border-right: 4px solid #ffffff;
        width: 296px;
        height: 296px;
    }

    .info_tra {
        position: relative;
    }

    .jt {
        background: url('/static/home/images/info_tra.svg') no-repeat;
        position: absolute;
        width: 14px;
        height: 28px;
        top: 57px;
        left: -14px;
    }

    .tuijian p {
        margin-bottom: 0px;
    }

    .tuijian .board {
        background-color: #fafafa;
        height: 50%;
    }

    .tuijian .board:hover {
        background-color: #f5f5f5;
    }

    .tuijian .board_top {
        padding: 0 0 0 20px;
        border-bottom: 4px solid #fff;
        /*background: url('/static/home/images/info_tra.svg') no-repeat;*/
    }

    .tuijian .p1 {
        background: url('/static/home/images/box_title_sprite.svg');
        background-position: 0px 5px;
        width: 100px;
        height: 50px;
        border-bottom: 1px solid #ccc;
        line-height: 50px;
    }

    .tuijian .p2 {
        font-size: 19px;
        margin: 3px 0;
    }

    .tuijian .p3 {
        color: #999;
        font-size: 13px;
        padding-bottom: 8px;
    }

    .tuijian .p4 {
        font-size: 14px;
    }

    .tuijian .p4 a {
        font-size: 16px;
        color: #9e7e6b;
    }

    .tuijian .p5 {
        background-position: 23px 5px;
        margin-left: 176px;
    }

    .board_bottom_right p {
        padding-right: 20px;
    }

    .tuijian .board .p2:hover {
        color: #c90000;
        cursor: pointer;
    }

    .jt2 {
        background: url('/static/home/images/info_tra.svg') no-repeat;
        position: absolute;
        width: 14px;
        height: 28px;
        top: 74%;
        right: -14px;
        background-position: 0 -51px;
    }

    .tuijian2 .board_top {
        border-radius: 3px;
        border-right: 4px solid #ffffff;
        width: 296px;
        height: 296px;
        background-color: #fafafa;
        border-bottom: 0px;
    }

    .tuijian2 .board_last .p6 {
        margin-left: 151px;
    }

    .tuijian2 {
        position: relative;
    }

    .tuijian2 .board_last .jt3 {
        background: url('/static/home/images/info_tra.svg') no-repeat;
        position: absolute;
        width: 14px;
        height: 28px;
        top: 14%;
        right: -14px;
        background-position: 0 -51px;
    }

    .tuijian3 {
        border-right: 0px;
    }

    .tuijian img:hover {
        opacity: 0.8;

    }

    .content_load {
        padding: 20px 0;
        text-align: center;
    }

    .content_load:before {
        width: 22%;
        height: 20px;
        content: "";
        border-bottom: 2px solid #ddd;
        display: block;
        float: left;

    }

    .content_load:after {
        width: 22%;
        height: 4px;
        content: "";
        border-bottom: 2px solid #ddd;
        display: block;
        float: right;

    }

    .content_load span {
        cursor: pointer;
        padding: 10px;
        width: 49%;
        background-color: #f7f7f7;
        display: inline-block;
        font-size: 16px;
        color: #999;
    }

    .content_load span:hover {
        background-color: #f1f1f1;
    }

    .content-classify .caiji {
        border-bottom: 2px solid #ddd;
        width: 100%;
    }

    .content-classify .caiji a {
        color: #9e7e6b;
        float: right;
    }

    .content-classify_x .content-classify_list1 ul li {
        line-height: 38px;
    }

    .content-classify_x .content-classify_list1 ul li a {
        color: #000;
    }

    .content-classify_x .content-classify_list1 ul li a:hover {
        color: #c90000;
    }

    .content-classify_x .content-classify_list1 {
        display: flex;
        flex-direction: row;
    }

    .content-classify_x .content-classify_list1 ul {
        padding-left: 0px;
    }

    .content-classify_x .content-classify_list1 ul:first-child ~ ul {
        margin-left: 250px;
    }

    .footer {
        width: 100%;
    }

    .footer .wrapper {
        background-color: #333;
        display: flex;
        flex-direction: row;
    }

    .footer .wrapper ul {
        padding: 20px 0 5px 0;
    }

    .footer .wrapper ul:first-child ~ ul {
        margin-left: 80px;
    }

    .footer .wrapper ul li {
        line-height: 40px;
    }

    .footer .wrapper ul li:first-child {
        font-size: 16px;
    }

    .footer .wrapper ul li a {
        color: #ddd;
        text-decoration: none;
    }

    .footer .wrapper ul li a:hover {
        color: #ededed;
    }

    .column {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 20px;
        width: 248px;
        margin-left: 600px;
    }

    .column ul li .weixin {
        position: relative;
    }

    .column ul li .code {
        position: absolute;
        top: -87px;
        right: -174px;
        display: none;
    }

    .column ul li .weixin:hover .code {
        display: block;
    }

    .footer_last {
        background-color: #000;
        color: #999;
        height: 60px;
        width: 100%;
        line-height: 60px;
        text-align: center;
    }

    .footer_last p {
        margin: 0;
    }

    .elevator_item {
        position: fixed;
        right: 15px;
        bottom: 15px;
        display: flex;
        flex-direction: column;
    }

    .elevator_item a {
        display: inline-block;
        width: 40px;
        height: 36px;
        border-radius: 3px;
        cursor: pointer;
        background-color: #444;
    }

    .elevator_item a:hover {
        background-color: rgba(0, 0, 0, .6);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    }

    .elevator_item a:first-child ~ a {
        margin-top: 10px;
    }

    .elevator {
        background: url('/static/home/images/btbar.svg') 8px 6px no-repeat;
    }

    .help {
        background: url('/static/home/images/btbar.svg') 8px -74px no-repeat;;
    }

    .add-pic {
        background: url('/static/home/images/btbar.svg') 8px -34px no-repeat;;
    }

    .help_hint ul {
        padding-left: 0px;
        line-height: 38px;
    }

    .help_hint {
        position: fixed;
        right: 66px;
        bottom: 8px;
        border-radius: 5px;
        padding: 8px 30px 8px 0px;
        background-color: #fff;
        display: none;
    }

    .help_hint ul li {
        position: relative;
        width: 108px;
        height: 39px;
        text-align: center;
        line-height: 39px;
    }

    .help_hint, .add_hint ul li:hover {
        cursor: pointer;
    }


    .help_hint ul li span {
        position: absolute;
        left: 7px;
        top: 11px;
        display: inline-block;
        width: 16px;
        height: 100px;
    }

    .help_hint ul li .s1 {
        background: url('/static/home/images/icon_user_menu.svg') 0 0 no-repeat;
        background-position: 0 -639px;
    }

    .jt_b {
        position: absolute;
        right: -35px;
        top: -20px;
        width: 6px;
        height: 11px;
        background: url('/static/home/images/code_arrow.png');
    }

    .add_hint ul {
        padding-left: 15px;
        line-height: 38px;
    }

    .add_hint {
        position: fixed;
        right: 66px;
        bottom: 8px;
        border-radius: 5px;
        padding: 8px 30px 8px 0px;
        background-color: #fff;
        display: none;
    }

    .add_hint ul li {
        position: relative;
        width: 108px;
        height: 39px;
        text-align: left;
        line-height: 39px;
        padding-left: 10px;

    }

    .add_hint ul li button {
        border: none;
        background: #fff;
    }


    .add_hint .jt_b {
        top: 25px;
    }

    .add_hint ul li span {
        position: absolute;
        left: -4px;
        top: 11px;
        display: inline-block;
        width: 16px;
        height: 100px;
    }

    .add_hint ul li .s1 {
        background: url('/static/home/images/icon_user_menu.svg') 0 0 no-repeat;
        background-position: 0 -639px;
    }

    .a-upload {
        padding: 114px 242px;
        height: 20px;
        line-height: 20px;
        position: relative;
        cursor: pointer;
        color: #888;
        background: #fafafa;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }

    .a-upload input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer
    }

    .a-upload:hover {
        color: #444;
        background: #eee;
        border-color: #ccc;
        text-decoration: none
    }

    #header_top_left_title li a {
        color: #fff;
        text-decoration: none
    }

    .user-head-p {
        position: relative;
        height: 50px;
        width: 50px;
        line-height: 44px;
        border: 1px solid #ddd4d4;
        float: right;
        right: 10px;
    }

    .right-jian {
        background: url('/static/home/images/menu_sprite.svg') 0 -50px no-repeat;
        width: 8px;
        height: 8px;
        position: absolute;
        right: 0;
        bottom: 0;
        display: inline-block;
    }

    .userselect {
        padding: 10px 0;
        top: 49px;
        right: -1px;
        background-color: #fff;
        position: absolute;
        background: #fff;
        width: 180px;
        text-align: left;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
        overflow: hidden;
        font-size: 14px;
        color: #221919;
        display: none;
    }
    .userselect div:hover{
        background-color: #f5f5f5;
        cursor: pointer;
    }
    .user-head-p:hover .userselect{
        display: block;
    }

    .userselect div a {
        display: inline-block;
        text-decoration: none;
        padding-left: 20px;
        height: 38px;
        line-height: 38px;
        text-align: left;
        font-weight: 400;
        position: relative;
        color: #222;
    }
    .userselect div i{
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;
        left: 15px;
    }
    .userselect div span{
        margin-left: 10px;
    }



</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/home/css/reset.css">
    <link href="/static/home/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/home/css/css.css" rel="stylesheet">
    <title>Document</title>

</head>
<body>
<!-- 头部导航条 -->
<div id="header_top">
    <div class="header_ta">
        <div id="header_top_all">
            <!-- 导航 -->
            <div id="header_top_left">
                   <!-- 顶部导航条 -->
                <div id="header_top_left_logo">
                    <img src="/static/home/images/logo_wt.svg">
                </div>
                                <!-- 六个超链接 -->
                <ul id="header_top_left_title">
                    <li class="default"><a href="{:url('home/index/loadIndex')}">首页</a></li>
                    <li class="menu"><a href="{:url('home/index/index')}">发现</a></li>
                    <li class="menu"><a href="">最新</a></li>
                    <li class="menu"><a href="">美思</a></li>
                    <li class="menu"><a href="">活动</a></li>
                    <li class="menu"><a href="">教育</a></li>
                    <li class="menu menu2"></li>
                </ul>
                <div class="search">
                    <input type="text">
                </div>
            </div>
        </div>
        {if condition="$Think.session.name eq true"}
        <div class="user-headr">
            <div class="user-head-p text-center">
                <a href="{:url('home/UserPhoto/index')}"><img src="/static/home/test/tx1.jfif" width="26" height="26"></a>
                <span class="right-jian"></span>

                <div class="userselect">
                    <div><span class="glyphicon glyphicon-user"></span><a href="">我的画板</a></div>
                    <div><span class="glyphicon glyphicon-search"></span><a href="">查找好友</a></div>
                    <div><span class="glyphicon glyphicon-heart"></span><a href="">我的关注</a></div>
                    <div><span class="glyphicon glyphicon-cog"></span><a href="">账号设置</a></div>
                    <div><span class="glyphicon glyphicon-log-in"></span><a href="{:url('home/index/loginout')}">退出</a></div>
                </div>
            </div>


        <!--                <button id="username" style="width:80px">{$Think.session.name['name']}</button>-->
        <!--                <a href="{:url('home/index/loginout')}" id="out">退出</a>-->
        {else}
        <div id="header_top_right" class="">
            <button id="login" data-toggle="modal" data-target="#hiModal">登录</button>
            <button id="rigister" data-toggle="modal" data-target="#myModal">注册</button>
        </div>
        {/if}


    </div>
</div>
{block name="main"}

<!-- banner图 -->
<div class="banner">
    <img class="banner" src="/static/home/images/banner.jpg" width="100%">
    <img class="guanggao" src="/static/home/images/guanggao.jfif" width="100%">
</div>
<!-- 中间部分 -->

<!-- Button trigger modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content bg-info">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <img src="/static/home/images/logo.svg" width="120" alt="">
            </div>
            <div class="modal-body">
                <form action="{:url('home/index/reguser')}" method="post" name="regForm" id="regForm" onsubmit="return ckForm()">
                    <table align="center" class="table ">
                        <tr>
                            <td>Email</td>
                            <td><input type="text" class="form-control" name="email" onblur="ckEmail()"></td>
                            <td id="etab">*必填项</td>
                        </tr>
                        <tr>
                            <td>username</td>
                            <td><input type="text" class="form-control" name="nickname" id="namev" onblur="ckUser()">
                            </td>
                            <td id="utab">*必填项</td>
                        </tr>
                        <tr>
                            <td>sex</td>
                            <td>男:<input type="radio" name="sex" value="1">
                                女:<input type="radio" name="sex" value="0"></td>
                            <td id="utab">*( 可选 )</td>
                        </tr>
                        <tr>
                            <td>tel</td>
                            <td><input type="text" name="tel" id="telv" class="form-control" onblur="ckTel()"
                                       maxlength="11"></td>
                            <td id="Ttab">*必填项</td>
                        </tr>
                        <tr>
                            <td>password</td>
                            <td><input type="password" class="form-control" name="pass" id="passv" onblur="ckpwd()">
                            </td>
                            <td id="ptab">*必填项</td>
                        </tr>
                        <tr>
                            <td>repassword</td>

                            <td><input type="password" class="form-control" name="repass" id="repassv"
                                       onblur="ckrePwd()"></td>
                            <td id="reptab">*必填项,请再次输入密码
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>

                                <button  class="btn bg-success" type="submit">立即注册</button>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>

        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="hiModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <img src="/static/home/images/logo.svg" width="120" alt="">
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="loginForm" method="post" onsubmit="return false">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Tel</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="tel" placeholder="tel">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" name="pass" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="remember" value="yes"> 记住密码
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default bg-primary" onclick="logindo()">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="content">
    <div class="content_title container-fluid">
        <span>大家正在关注</span>
    </div>
    <!-- 大家正在关注的内容 -->
    <div id="content_icon">
        <div id="content_icon_one">钻戒</div>
        <div id="content_icon_two">婚纱</div>
        <div id="content_icon_three">汽车</div>
        <div id="content_icon_four">美食</div>
        <div id="content_icon_five">宠物</div>
        <div id="content_icon_six">手工/布艺</div>
    </div>
    <!-- 为你推荐 -->
    <div class="content_title container-fluid">
        <span>为你推荐</span>
    </div>
    <div class="content_tj" pagesize="5">
        {for start="0" end="13" comparison="lt" step="1" name="i" }
        <div class="container-fluid content_tuijian">
            <div class="tuijian">
                <a href=""><img class="face" src="/static/home/images/tj1.jfif"></a>
            </div>
            <div class="tuijian info_tra">
                <div class="jt"></div>
                <div class="board_top board">
                    <p class="p1"></p>
                    <p class="p2">海报设计</p>
                    <p class="p3">
                        <span>22222 采集</span>&nbsp;&nbsp;&nbsp;<span>55555 粉丝</span>
                    </p>
                    <p class="p4">来自 <a href="#">花无缺用户</a></p>
                </div>
                <div class="jt2"></div>
                <div class="board_bottom board text-right">
                    <div class="board_bottom_right">
                        <p class="p1 p5 text-right"></p>
                        <p class="p2">字体</p>
                        <p class="p3">22222采集 55555粉丝</p>
                        <p class="p4">来自 <a href="#">花无缺用户</a></p>
                    </div>
                </div>
            </div>
            <div class="tuijian">
                <a href=""><img class="face" src="/static/home/images/tj2.jfif"></a>
            </div>
            <div class="tuijian tuijian2">
                <div class="board_top board board_bottom_right board text-right board_last">
                    <p class="p1 p5 p6"></p>
                    <p class="p2">A UI 界面--PC</p>
                    <p class="p3">
                        <span>22222 采集</span>&nbsp;&nbsp;&nbsp;<span>55555 粉丝</span>
                    </p>
                    <p class="p4">来自 <a href="#">花无缺用户</a></p>
                    <div class="jt3"></div>
                </div>
            </div>
            <div class="tuijian tuijian3">
                <a href=""><img class="face" src="/static/home/images/tj3.png"></a>
            </div>
        </div>
        {/for}
    </div>

    <div class="content_load container-fluid load-bth">
        <span>加载更多</span>
    </div>

    <div class="content-classify container-fluid mt20">
        <div class="caiji">
            <span>以分类浏览花瓣</span>
            <a href="" class="text-right">所有采集 »</a>
        </div>

        <div class="content-classify_x">
            <div class="content-classify_list1">
                <ul>
                    {volist name="category" id="v" offset="0" length='5'}
                    <li><a href="">{$v['category_name']}</a></li>
                    {/volist}
                </ul>
                <ul>
                    {volist name="category" id="v" offset="5" length='5'}
                    <li><a href="">{$v['category_name']}</a></li>
                    {/volist}
                </ul>
                <ul>
                    {volist name="category" id="v" offset="10" length='5'}
                    <li><a href="">{$v['category_name']}</a></li>
                    {/volist}
                </ul>
                <ul>
                    {volist name="category" id="v" offset="15" length='5'}
                    <li><a href="">{$v['category_name']}</a></li>
                    {/volist}

                </ul>

            </div>
        </div>

    </div>
</div>
<!--底部-->
<div class="footer">
    <div class="container-fluid wrapper">
        <ul>
            <li><a href="">花瓣首页</a></li>
            <li><a href="">花瓣采集工具</a></li>
            <li><a href="">花瓣官方博客</a></li>
            <li><a href="">违规有害信息举报</a></li>
        </ul>
        <ul>
            <li><a href="">联系与合作</a></li>
            <li><a href="">联系我们</a></li>
            <li><a href="">用户反馈</a></li>
            <li><a href="">花瓣LOGO标准文档</a></li>
        </ul>
        <ul>
            <li><a href="">移动客户端</a></li>
            <li><a href="">花瓣 iPhone 版</a></li>
            <li><a href="">花瓣 Android 版</a></li>
            <li><a href="">花瓣 HD</a></li>
        </ul>

        <div class="column follow-us">
            <ul>
                <li><a>关注我们</a></li>
                <li><a href="#" target="_blank" rel="nofollow">新浪微博：@花瓣网</a></li>
                <li><a>联系客服：<span class="qiyu chat">在线客服</span></a></li>
                <li>
                    <a class="weixin">官方微信：<img src="/static/home/images/footer_code.png"
                                                data-baiduimageplus-ignore="1">
                        <img src="/static/home/images/weixin_huaban.png" class="code">
                    </a>
                </li>
            </ul>
        </div>

    </div>
    <div class="footer_last">
        <p>© Huaban 杭州纬音智网络有限公司
            |
            <img src="/static/home/images/ic_record.png" alt="">
            <a href="">浙公网安备 33010602001880号</a>
            |

            <a href="">备案信息: 浙B2-20110282-7</a>
        </p>
    </div>
</div>
{/block}




<!-- 右下角客服 帮助 反馈 -->
<div class="elevator_item">
    <a href="javascript: scroll(0, 0)" class="elevator"></a>
    <a href="" class="help"></a>
    <a href="" class="add-pic"></a>
</div>
<div class="help_hint">
    <ul>
        <li><span class="s1"></span>帮助中心</li>
        <li><span class="s3"></span>用户反馈</li>
        <li><span class="s4"></span>人工客服<i class="jt_b"></i></li>
    </ul>
</div>
<!-- 右下角添加采集, 添加画板按钮-->
<div class="add_hint">
    <ul>
        <li><span class="s1"></span>
            <button class="btn" id="btn-add" data-toggle="modal" data-target=".bs-example-modal-lg">添加采集</button>
        </li>
        <li><span class="s3"></span>
            <button class="btn ben-default" data-toggle="modal" data-target="#myModal_2">添加画板</button>
        </li>
        <li><span class="s4"></span>
            <button>安装采集工具</button>
            <i class="jt_b"></i></li>
    </ul>
</div>
<!-- 添加采集模态框 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content mt100">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">上传采集</h4>
            </div>
            <a href="javascript:" class="a-upload">
                <input type="file" name="file" id="">点击这里上传文件
            </a>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 添加画板模态框 -->
<div class="modal fade" id="myModal_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content mt100">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    新建画板
                </h4>
            </div>
            <div class="modal-body" style="width: 550px; margin: 0px auto;">
                <input type="text" class="form-control" placeholder="画板标题, 不能超过32个字符">
                <select class="form-control mt20">
                    {volist name="category" id="v"}
                    <option value="">{$v['category_name']}</option>
                    {/volist}
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-danger" id="input-button" onclick="setUserGold()">
                    创建画板 <!--成功的按钮-->
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="/static/home/js/jquery.min.js"></script>
<script src="/static/home/js/bootstrap.min.js"></script>
<script src="/static/home/js/masonry.pkgd.min.js"></script>
<script src="/static/home/js/imagesloaded.js"></script>
<script src="/static/home/js/tagsinput.js"></script>
{block name="top"}

<script>
    //注册
    function add() {
        //串行化所有表单值
        if (!($('#telv').val() && $('#namev').val() && $('#repassv').val() && $('#passv').val())) {
            return alert('请填写信息!');
        }
    }

    //登录
    function logindo() {
        mes = $('#loginForm').serialize();
        $.post("{:url('home/index/logindo')}", {mes: mes}, function (data) {

            alert(data);
            $('.close').click();
            window.location.reload()
        });
    }


    $(function () {
        $(".help").bind({
            mouseover: function () {
                $('.help_hint').show();
            }
        });
        $(".help_hint").bind({
            mouseover: function () {
                $('.help_hint').show();
            }, mouseout: function () {
            },
            mouseout: function () {
                $('.help_hint').hide();
            }
        });

        $(".add-pic").bind({
            mouseover: function () {
                $('.add_hint').show();
            }
        });
        $(".add_hint").bind({
            mouseover: function () {
                $('.add_hint').show();
            }, mouseout: function () {
                $('.add_hint').hide();
            }
        });
        // 顶部滚动条滚动后, 背景变白
        $(document).scroll(function () {
            if ($(document).scrollTop() > 228) {
                $('#header_top_left_title li a').css({'color': 'black'});
                $('.header_ta').css({'background': '#fff'});
                $('#header_top_left_logo img').attr('src', '/static/home/images/logo.svg');
                $('#header_top_left_title .menu2').css({'background': 'url("/static/home/images/menu_sprite.svg") 0 -248px no-repeat;'});
                $('.search input').css({'background-color': 'rgba(96, 96, 96, 0.2)', 'border': '1px solid #000'});
                $('#rigister').css({'background-color': '#d9d9d9', 'color': '#444'});


            } else {
                $('#header_top_left_title li a').css({'color': '#fff'});
                $('.header_ta').css({'background': ''});
                $('#header_top_left_logo img').attr('src', '/static/home/images/logo_wt.svg');
                $('#header_top_left_title .menu2').css({'background': 'url("/static/home/images/menu_sprite.svg") -50px -558px no-repeat'});
                $('.search input').css({'background-color': 'rgba(96, 96, 96, 0.1)', 'border': '1px solid #FFFFFF'});
                $('#rigister').css({'background-color': 'rgba(255, 255, 255, 0.1)', 'color': '#FFFFFF'});
            }
        });


        // 加载更多按钮功能
        var showMoreNChildren = function ($children, n) {
            //显示某jquery元素下的前n个隐藏的子元素
            var $hiddenChildren = $children.filter(":hidden");
            var cnt = $hiddenChildren.length;
            for (var i = 0; i < n && i < cnt; i++) {
                $hiddenChildren.eq(i).show();
            }
            return cnt - n;//返回还剩余的隐藏子元素的数量
        }
        $(".content_tj").each(function () {
            var pagesize = $(this).attr('pagesize') || 10;
            var $children = $(this).children();
            if ($children.length > pagesize) {
                for (var i = pagesize; i < $children.length; i++) {
                    $children.eq(i).hide();
                }

                $(".load-bth span").click(function () {
                    if (showMoreNChildren($children, pagesize) <= 0) {
                        //如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
                        $(this).html('没有更多了');
                        $(this).css({'cursor': 'default'});
                    }
                })
            }
        });
    });
</script>
{/block}
</body>
</html>

<script>

    // 验证邮箱
    function ckEmail() {
        var email = document.regForm.email.value;
        var etab = document.getElementById('etab');
        if (email.search(/^[\w-]+@[\w-]+(\.\w+){1,3}$/) == -1) {
            etab.style.color = '#f00';
            etab.innerHTML = '! 邮箱格式不正确,请重新输入';
            return false;
        } else {
            etab.style.color = 'orange';
            etab.innerHTML = '√ 邮箱验证通过';
            return true;

        }
    }

    // 用户名验证
    function ckUser() {
        var user = document.regForm.nickname.value;
        var utab = document.getElementById('utab');
        if (user.match(/^[A-Za-z0-9_\u4e00-\u9fa5]{5,16}$/) == null) {
            utab.style.color = 'red';
            utab.innerHTML = '! 用户名长度为6~12位';
            return false;
        } else {
            utab.style.color = 'orange';
            utab.innerHTML = '√ 用户名正确';
            return true;
        }
    }

    function ckTel() {
        var tel = document.regForm.tel.value;
        var Ttab = document.getElementById('Ttab');

        if (tel.search(/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/) == -1) {
            Ttab.style.color = 'red';
            Ttab.innerHTML = '! 手机号不存在';
            return false;
        } else {
            Ttab.style.color = 'orange';
            Ttab.innerHTML = '√ 验证通过';
            return true;
        }
    }

    function ckpwd() {
        var pwd = document.regForm.pass.value;
        var ptab = document.getElementById('ptab');

        if (pwd.search(/^[a-zA-Z]+\w{6,30}$/) == -1) {
            ptab.style.color = 'red';
            ptab.innerHTML = '! 密码以字母开头且长度为6-12位';
            return false;
        } else {
            ptab.style.color = 'orange';
            ptab.innerHTML = '√ 验证通过';
            return true;
        }
    }

    function ckrePwd() {
        var pwd = document.regForm.pass.value;
        var repwd = document.regForm.repass.value;
        var reptab = document.getElementById('reptab');
        if (repwd != pwd) {
            reptab.style.color = 'red';
            reptab.innerHTML = '! 两次密码输入不一致';
        } else if (pwd.search(/^[a-zA-Z]+\w{6,30}$/) == -1) {
            reptab.style.color = 'red';
            reptab.innerHTML = '! 密码以字母开头且长度为5-12位';
            return false;
        } else {
            reptab.style.color = 'orange';
            reptab.innerHTML = '√ 验证通过';
            return true;
        }
    }

    function ckForm(){
        if((ckEmail()&& ckpwd()&&ckUser()&&ckTel()&&ckrePwd())){
            return true;
        }else{
            return false;
        }
    }
</script>

